﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <link href="../../layui/css/layui.css" rel="stylesheet" />
</head>
<body>
    <div class="layui-container" style="margin-top:20px; margin-right:50px;">
        <form class="layui-form layui-col-md6">
            <input type="hidden" name="id" />
            <!-- 部门  -->
            <div class="layui-form-item">
                <label class="layui-form-label">姓名：</label>
                <div class="layui-input-inline">
                    <input type="text" name="name" class="layui-input" required lay-verify="required" />
                </div>
            </div>

            <!-- 角色  -->
            <div class="layui-form-item">
                <label class="layui-form-label">性别：</label>
                <div class="layui-input-inline">
                    <input type="text" name="sex" class="layui-input" required lay-verify="required" />
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">出生日期：</label>
                <div class="layui-input-inline">
                    <input type="text" name="Birthday" class="layui-input" required lay-verify="required" />
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">手机号：</label>
                <div class="layui-input-inline">
                    <input type="text" name="Phone" class="layui-input" required lay-verify="required" />
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">状态：</label>
                <div class="layui-input-inline">
                    <input type="text" name="Status" class="layui-input" required lay-verify="required" />
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">角色：</label>
                <div class="layui-input-inline">
                    <input type="text" name="RoleName" class="layui-input" required lay-verify="required" />
                </div>
            </div>




          


            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </form>
    </div>
    <script src="../../layui/layui.js"></script>
    <script src="../../Scripts/jquery-3.7.0.min.js"></script>

    <script type="text/javascript">

        var mystatus = true;
        var form;
        layui.use(['form', 'laydate'], function () {
            form = layui.form;
            var laydate = layui.laydate;

            //执行一个laydate实例
            laydate.render({
                elem: '#mybirthday' //指定元素
                , type: 'date'
            });

            //请求部门数据


            //下拉框选择事件
            //form.on('select(deptSelect)', function (data) {
            //    //console.log(data.elem); //得到select原始DOM对象
            //    console.log(data.value); //得到被选中的值
            //    //console.log(data.othis); //得到美化后的DOM对象

            //    //根据所选部分加载 对应部门下的角色
            //    SelectRoles(data.value);
            //});

            //开关触发


            //表单提交 事件
            form.on('submit(formDemo)', function (data) {
                //console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象
                //console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回
                //console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
                alert(JSON.stringify(data.field));

                //post 请求格式
                $.ajax({
                    type:'post',
                    url: '/APi/Users',
                    data: JSON.stringify(data.field ),
                    dataType: 'json',
                    contentType: 'application/json',
                    success: function (res) {
                        if (res.code == 1) {
                            top.layer.closeAll();
                            //让父窗口是关闭子窗口
                            top.layer.msg(res.msg, { icon: 6 });

                            //重载数据  刷新

                            if ($(".layui-show iframe", top.document).get(0)) {
                                $(".layui-show iframe", top.document).get(0).contentWindow.tableIns.reload({
                                    where: { //设定异步数据接口的额外参数，任意设
                                        name: $("#txt_search").val()
                                        //…
                                    }
                                });
                            } else {

                                top.tableIns.reload({
                                    where: { //设定异步数据接口的额外参数，任意设
                                        name: $("#txt_search").val()
                                        //…
                                    }
                                });
                            }


                        } else {

                            layer.msg(res.d.msg, { icon: 5 });
                        }
                    },
                    error: function (err) {
                        console.log(err);
                    }
                })

                //*****/
                return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
            });

            //自定义验证规则
            form.verify({
                username: function (value, item) { //value：表单的值、item：表单的DOM对象
                    if (!new RegExp("^[a-zA-Z0-9_\u4e00-\u9fa5\\s·]+$").test(value)) {
                        return '用户名不能有特殊字符';
                    }
                    if (/(^\_)|(\__)|(\_+$)/.test(value)) {
                        return '用户名首尾不能出现下划线\'_\'';
                    }
                    if (/^\d+\d+\d$/.test(value)) {
                        return '用户名不能全为数字';
                    }

                    //如果不想自动弹出默认提示框，可以直接返回 true，这时你可以通过其他任意方式提示（v2.5.7 新增）
                    if (value === 'xxx') {
                        alert('用户名不能为敏感词');
                        return true;
                    }
                }

                //我们既支持上述函数式的方式，也支持下述数组的形式
                //数组的两个值分别代表：[正则匹配、匹配不符时的提示文字]
                , pass: [
                    /^[\S]{6,12}$/
                    , '密码必须6到12位，且不能出现空格'
                ]
            });
        })




    </script>

</body>
</html>